<template>
	<el-container id="full-container">
		<el-header height="80px">蜗牛学生管理系统</el-header>
		<el-main>
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>登录/Login</span>
				</div>
				<div class="text item">
					<el-form :model="user" label-width="100px">
						<el-form-item label="登录账号：">
							<el-input v-model="user.username"></el-input>
						</el-form-item>
						<el-form-item label="登陆密码：">
							<el-input v-model="user.password"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="loginSubmit">立即创建</el-button>
							<router-link to="/register" id="toRegister">没有账号，去注册？</router-link>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapActions
	} = createNamespacedHelpers('users');
	export default {
		data() {
			return {
				user: {
					username: "张三123",
					password: "123",
				},
			};
		},
		methods: {
			...mapActions(['login']),
			async loginSubmit() {
				const res = await this.login(this.user);
				if (res.code) {
					this.$message({
						message: '恭喜你，登录成功！',
						type: 'success',
						center: true,
					});
					localStorage.token = res.token;
					this.$router.push('/home')
				} else {
					this.$message({
						message: '账号或密码错误，登录失败，请重试！',
						type: 'error',
						center: true,
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	#full-container {
		min-height: 100vh;

		.el-header {
			background-color: #b3c0d1;
			line-height: 80px;
			font-size: 30px;
		}

		.el-main {
			background-color: #e9eef3;
			display: flex;
			justify-content: center;
			align-items: center;

			.item {
				margin-bottom: 18px;
			}

			.text {
				.el-form {
					.el-form-item {
						.el-input {
							width: 250px;
						}

						.el-button {
							margin: 0px 20px 0px 80px;
						}

						#toRegister {
							font-size: 12px;
						}
					}
				}
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both;
			}

			.box-card {
				width: 500px;
				margin: 0 auto;

				// 登录框头部文字
				.clearfix {
					text-align: center;
					font-size: 20px;
				}
			}
		}
	}
</style>